.qtd-svg-icon {
  box-sizing: content-box !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  contain: strict;
  fill: currentcolor;

  .ionicon {
    stroke: currentcolor;
  }

  .ionicon-fill-none {
    fill: none;
  }

  .ionicon-stroke-width {
    stroke-width: var(--ionicon-stroke-width, 32px);
  }

  .icon-inner,
  .ionicon,
  svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Icon RTL
   * -----------------------------------------------------------
   */

  /**
   * Safari <16.4 incorrectly reports
   * that it supports :dir(rtl) when it does not.
   * This @supports statement lets us target
   * WebKit browsers to apply the RTL fallback.
   * -webkit-named-image only exists on WebKit.
   * For WebKit browsers that do support :dir(rtl)
   * (i.e. Safari >= 16.4) then the :dir(rtl)
   * code farther down on the page will take
   * effect and override this fallback.
   */
  @supports (background: -webkit-named-image(i)) {
    &.icon-rtl .icon-inner {
      transform: scaleX(-1);
    }
  }

  /**
   * Fallback for browsers that support
   * neither :host-context nor :dir.
   * The icon will not react to dir
   * changes, but it will at least
   * respect the dir on component load.
   */
  &.icon-rtl .icon-inner {
    transform: scaleX(-1);
  }

  /* For Vue components, we use attribute selectors instead of :host-context */
  &.flip-rtl[dir='rtl'] .icon-inner {
    transform: scaleX(-1);
  }

  @supports selector(:dir(rtl)) {
    &.flip-rtl:dir(rtl) .icon-inner {
      transform: scaleX(-1);
    }

    /**
     * This is needed for WebKit otherwise the fallback
     * will always cause the icon to be flipped if the document
     * loads in RTL.
     */
    &.flip-rtl:dir(ltr) .icon-inner {
      transform: scaleX(1);
    }
  }

  /* Icon Sizes
   * -----------------------------------------------------------
   */

  &.icon-small {
    font-size: 1.125rem !important;
  }

  &.icon-large {
    font-size: 2rem !important;
  }

  /* Icon Colors
   * -----------------------------------------------------------
   */

  &.ion-color {
    color: var(--ion-color-base) !important;
  }

  &.ion-color-primary {
    --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  }

  &.ion-color-secondary {
    --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  }

  &.ion-color-tertiary {
    --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  }

  &.ion-color-success {
    --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  }

  &.ion-color-warning {
    --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  }

  &.ion-color-danger {
    --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  }

  &.ion-color-light {
    --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  }

  &.ion-color-medium {
    --ion-color-base: var(--ion-color-medium, #92949c) !important;
  }

  &.ion-color-dark {
    --ion-color-base: var(--ion-color-dark, #222428) !important;
  }
}
